<script lang="ts" setup>
const { nList } = defineProps(['nList'])
</script>

<template>
    <div class="news-item">
        <div class="news-item-top">
            <div class="news-item-con">{{ nList?.title }}</div>
            <div class="news-img">
                <img :src="nList?.previewImages[0].url">
            </div>
        </div>
        <div class="news-item-bot">
            <div class="date">电影资讯 5天前</div>
            <div class="item-num">
                <div class="item-num-img">
                    <img src="../../assets/imgs/movie/read-num.png">{{ nList?.viewCount }}
                </div>
                <div class="item-num-img">
                    <img src="../../assets/imgs/movie/replying-comments.png">{{ nList?.commentCount }}
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.news-item{
    width: 100%;
    padding: 0 4vw;
    box-sizing: border-box;
    padding-bottom: 2vw;
    margin-bottom: 4vw;
    border-bottom: #ececec 1.5px dashed;

    .news-item-top{
        color: #333333;
        display: flex;
        justify-content: space-between;
        
        .news-item-con{
            width: 56vw;
            line-height: 6vw;
        }
        .news-img{
            width: 32vw;
            height: 24vw;
            border-radius: 2vw;
            overflow: hidden;

            img{
                width: 100%;
                transform: translateY(-20%);
            }
        }
    }
    .news-item-bot{
        color: #999999;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 2vw 0;
        
        .item-num{
            width: 22vw;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .item-num-img{
                display: flex;
                align-items: center;
                
                img{
                    width: 4vw;
                    margin-right: 1vw;
                }
            }
        }
    }
}
</style>